<template>
  <div class="sort-bar">
    <div class="sort-bar-content">
      <div class="ml-screen-item" @click="defaultScreen">
        <div class="ml-screen-text">
          <span class="text">默认</span>
        </div>
      </div>
      <div
        class="ml-screen-item ml-screen-time"
        @click="timeScreen"
        :class="{'select-top':sortArr.publish_timeOrder === 0,'select-bottom':sortArr.publish_timeOrder === 1}"
      >
        <div class="ml-screen-text">
          <span class="text">时间</span>
          <span class="md-sort">
            <i class="el-icon-caret-top web-icon"></i>
            <i class="el-icon-caret-bottom web-icon"></i>
          </span>
        </div>
      </div>

      <div
        class="ml-screen-item ml-screen-rate"
        @click="rateScreen"
        :class="{'select-top':sortArr.commission_rateOrder === 1,'select-bottom':sortArr.commission_rateOrder === 0}"
      >
        <div class="ml-screen-text">
          <span class="text">代理费率</span>
          <span class="md-sort">
            <i class="el-icon-caret-top web-icon"></i>
            <i class="el-icon-caret-bottom web-icon"></i>
          </span>
        </div>
      </div>
      <div class="pattern-wrap">
        <div class="pattern-content">
          <span class="pattern-title">代理模式：</span>
          <el-select
            class="pattern-select"
            v-model="sortArr.is_deposit"
            @change="depositScreen"
            placeholder="代理模式"
            size="small"
          >
            <el-option
              v-for="item in pattern"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-checkbox v-show="checkboxFlag" @change="passwordScreen" v-model="passwordFlag">专属</el-checkbox>
        </div>
      </div>
      <div class="good-status" :class="{'status-focus':focusFlag}">
        <span class="pattern-title">商品状态：</span>
        <el-select
          class="status-select"
          v-model="statusVal"
          multiple
          placeholder="请选择"
          size="mini"
          @change="statusSelect"
          @focus="statusFocus"
          @blur="statusBlur"
        >
          <el-option
            v-for="item in goodStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>

    <div v-if="type_flag=='wood'" class="sort-bar-more">
      <div class="ml-pagebtn">
        <i class="el-icon-arrow-left" @click="prevPage"></i>
        <span class="ml-nowpage">
          <span
            class="curr"
          >{{Math.ceil(total.wood_total/listParams.limit) > 0 ? listParams.page : 0}}</span>
          /{{Math.ceil(total.wood_total/listParams.limit)}}
        </span>
        <i class="el-icon-arrow-right" @click="nextPage"></i>
      </div>
    </div>

    <div v-else class="sort-bar-more">
      <div class="ml-pagebtn">
        <i class="el-icon-arrow-left" @click="prevPage"></i>
        <span class="ml-nowpage">
          <span class="curr">{{Math.ceil(total.fur_total/furParams.limit) > 0 ? furParams.page : 0}}</span>
          /{{Math.ceil(total.fur_total/furParams.limit)}}
        </span>
        <i class="el-icon-arrow-right" @click="nextPage"></i>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    total: {
      type: Object,
    },
    listParams: {
      type: Object,
    },
    furParams: {
      type: Object,
    },
    type_flag: {
      type: String,
    },
  },
  data() {
    return {
      sortArr: {
        is_deposit: "",
        is_password: "",
        publish_timeOrder: "",
        product_stats: "",
        commission_rateOrder: "",
      },
      passwordFlag: false,
      pattern: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 1,
          label: "有订金",
        },
        {
          value: 0,
          label: "无订金",
        },
      ],
      goodStatus: [
        {
          value: 1,
          label: "即将开始",
        },
        {
          value: 2,
          label: "进行中",
        },
        {
          value: 3,
          label: "代理已满",
        },
      ],
      focusFlag: false,
      statusVal: [],
      checkboxFlag: false,
    };
  },
  computed: {},
  watch: {
    type_flag(newVal, oldVal) {
      console.log("旧的", oldVal);
      console.log("新的", newVal);
      if (newVal != oldVal) {
        this.sortArr.is_password = "";
        this.sortArr.publish_timeOrder = "";
        this.sortArr.is_deposit = "";
        this.sortArr.product_stats = "";
        this.sortArr.commission_rateOrder = "";
        this.passwordFlag = false;
        this.statusVal = [];
        this.checkboxFlag = false;
      }
    },
  },
  methods: {
    statusFocus() {
      this.focusFlag = true;
    },
    statusBlur() {
      this.focusFlag = false;
    },
    statusSelect(val) {
      console.log(val);
      if (val.length == 1) {
        this.sortArr.product_stats = val[0];
      } else if (val.length == 3 || val.length == 0) {
        this.sortArr.product_stats = 0;
      } else if (val.length == 2) {
        if ((val[0] == 1 && val[1] == 2) || (val[0] == 2 && val[1] == 1)) {
          this.sortArr.product_stats = "1,2";
        } else if (
          (val[0] == 1 && val[1] == 3) ||
          (val[0] == 3 && val[1] == 1)
        ) {
          this.sortArr.product_stats = "1,3";
        } else if (
          (val[0] == 2 && val[1] == 3) ||
          (val[0] == 3 && val[1] == 2)
        ) {
          this.sortArr.product_stats = "2,3";
        }
      }
      console.log(this.sortArr.product_stats);
      this.$emit("sort", this.sortArr);
    },
    defaultScreen() {
      this.sortArr.is_password = "";
      this.sortArr.publish_timeOrder = "";
      this.sortArr.is_deposit = "";
      this.sortArr.product_stats = "";
      this.sortArr.commission_rateOrder = "";
      this.passwordFlag = false;
      this.statusVal = [];
      this.checkboxFlag = false;
      this.$emit("sort", this.sortArr, "default");
    },
    depositScreen(value) {
      console.log("订金状态", value);
      if (value == 2) {
        this.goodStatus.pop();
      } else {
        if (this.goodStatus.length == 2) {
          this.goodStatus.push({
            value: 3,
            label: "代理已满",
          });
        }
      }
      if (value == 1) {
        this.checkboxFlag = true;
      } else {
        this.checkboxFlag = false;
      }
      this.$emit("sort", this.sortArr);
    },
    passwordScreen(value) {
      // this.sortArr.is_password == 1
      //   ? (this.sortArr.is_password = 0)
      //   : (this.sortArr.is_password = 1);
      console.log("专属状态", value);
      this.sortArr.is_password = value ? 1 : 0;
      this.$emit("sort", this.sortArr);
    },
    typeScreen(value) {
      console.log("type状态", value);
      this.sortArr.is_type = value;
      this.$emit("sort", this.sortArr);
    },
    timeScreen() {
      console.log(this.sortArr.publish_timeOrder);
      if (this.sortArr.publish_timeOrder === "") {
        this.sortArr.publish_timeOrder = 0;
      } else if (this.sortArr.publish_timeOrder === 0) {
        this.sortArr.publish_timeOrder = 1;
      } else {
        this.sortArr.publish_timeOrder = "";
      }
      this.$emit("sort", this.sortArr);
    },
    rateScreen() {
      if (this.sortArr.commission_rateOrder === "") {
        this.sortArr.commission_rateOrder = 1;
      } else if (this.sortArr.commission_rateOrder === 1) {
        this.sortArr.commission_rateOrder = 0;
      } else {
        this.sortArr.commission_rateOrder = "";
      }
      this.$emit("sort", this.sortArr);
    },
    totalScreen() {
      if (this.sortArr.is_total == 0) {
        this.sortArr.is_total = 1;
      } else if (this.sortArr.is_total == 1) {
        this.sortArr.is_total = 2;
      } else {
        this.sortArr.is_total = 0;
      }
      this.$emit("sort", this.sortArr);
    },
    prevPage() {
      this.$emit("prevPage");
    },
    nextPage() {
      this.$emit("nextPage");
    },
  },
};
</script>
<style lang="scss" >
.sort-bar {
  .good-status {
    padding: 0 10px;
    .status-select {
      width: 80%;
      .el-select__tags {
        padding-left: 5px;
        .el-tag {
          &.el-tag--info {
            background: #fff;
            margin-right: 5px;
            .el-tag__close {
              color: #fe6616;
              background: #fff;
            }
          }
        }
      }
      .el-input__inner {
        width: 100%;
      }
    }
  }
  .pattern-wrap {
    .pattern-content {
      .el-select {
        .el-input {
          .el-input__inner {
            height: 30px;
            line-height: 31px;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.sort-bar {
  font-size: 0;
  background: #f9f9f9;
  position: relative;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  padding: 0 15px 0 0;
  margin: 5px 0;
  .sort-bar-content {
    display: flex;
    width: 90%;
    .good-status {
      width: 370px;
      margin-top: 9px;
      position: relative;
      transition: border-color 0.2s;
      .pattern-title {
        display: inline-block;
      }
    }
  }
  .pattern-title {
    font-size: 14px;
    color: #999;
  }

  .pattern-wrap {
    position: relative;
    display: flex;
    .pattern-content {
      margin: auto 0;
      margin-left: 20px;
      .pattern-title {
        font-size: 14px;
        color: #999;
      }
      .pattern-select {
        margin-right: 20px;
      }
    }
  }
  .agentType-wrap {
    position: relative;
    top: 14px;
  }
}
.ml-screen-item {
  display: inline-block;
  font-size: 12px;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  border-right: 1px solid #ececec;
  z-index: 1;
  color: #404040;
  .ml-screen-text {
    width: 80px;
    line-height: 44px;
    height: 44px;
    color: #999;
    font-size: 14px;
    text-align: center;
  }
  &.ml-screen-rate {
    .ml-screen-text {
      width: 100px;
    }
    &.select-top {
      .ml-screen-text {
        color: #fe804c;
      }
      .el-icon-caret-top {
        color: #fe804c;
      }
    }
    &.select-bottom {
      .ml-screen-text {
        color: #fe804c;
      }
      .el-icon-caret-bottom {
        color: #fe804c;
      }
    }
  }
}

.ml-pagebtn {
  font-size: 14px;
  height: 44px;
  line-height: 44px;
  text-align: right;
  padding-right: 15px;
  .curr {
    color: #fe804c;
  }
  i {
    cursor: pointer;
  }
}

.md-sort {
  color: #bcbcbc;
  display: inline-block;
  height: 16px;
  line-height: 7px;
  vertical-align: middle;
  margin-top: -6px;
  margin-left: 5px;
}

.md-sort i {
  display: block;
  height: 8px;
}

.ml-screen-password {
  &.select {
    .ml-screen-text {
      color: #fe804c;
    }
    .web-icon {
      color: #fe804c;
    }
  }
}

.ml-screen-time {
  &.select-top {
    .ml-screen-text {
      color: #fe804c;
    }
    .el-icon-caret-top {
      color: #fe804c;
    }
  }
  &.select-bottom {
    .ml-screen-text {
      color: #fe804c;
    }
    .el-icon-caret-bottom {
      color: #fe804c;
    }
  }
}
</style>
